<template>
 <div style="width: 100%;height: 100%;padding: 128px 64px;overflow-y: scroll;">
  <div style="margin-bottom: 15px;">
    所有功能
  </div>
    <div class="button-wrapper" style="display: inline-block;width: 450px;">

<span>
  <div class="button" @click="changePage('/backgroundStudent',2)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 9a5.001 5.001 0 000 10 5.001 5.001 0 000-10zm-9 5a9 9 0 1118 0 9 9 0 01-18 0zm3.67 16C8.03 30 5 32.997 5 36.8V40h24v-3.2c0-3.803-3.03-6.8-6.67-6.8H11.67zM1 36.8C1 30.835 5.78 26 11.67 26h10.66C28.22 26 33 30.835 33 36.8v5.4c0 .994-.8 1.8-1.78 1.8H2.78C1.8 44 1 43.194 1 42.2v-5.4zM45.67 42h-8.94v-4H43v-1.2c0-2.004-1.69-3.8-4-3.8h-2.62a10.92 10.92 0 00-1.97-4H39c4.42 0 8 3.492 8 7.8v3.9c0 .718-.6 1.3-1.33 1.3zM33 20c0-1.105.9-2 2-2s2 .895 2 2-.9 2-2 2-2-.895-2-2zm2-6c-3.31 0-6 2.686-6 6s2.69 6 6 6 6-2.686 6-6-2.69-6-6-6z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">账号管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundUniversity',3)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.106 27.17a1 1 0 011.341-.446l2 1a1 1 0 01.553.894v6.187l11 5.923 11-5.923v-6.187a1 1 0 01.553-.894l2-1a1 1 0 011.447.894V36a2 2 0 01-1.052 1.76l-13 7a2 2 0 01-1.896 0l-13-7A2 2 0 019 36v-8.382a1 1 0 01.106-.447zM25.415 4.26l.226.093 18 8.095c1.534.69 2.324 2.113 2.358 3.554L46 16v19a1 1 0 01-1 1h-2a1 1 0 01-1-1V20.557l-16.226 8.028a4 4 0 01-3.336.098l-.212-.098-18-8.905c-2.966-1.467-2.951-5.666-.055-7.142l.188-.09 18-8.096a4 4 0 013.056-.093zM24 8L6 16.095 24 25l18-8.905L24 8z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">院校管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundMajor',4)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.958 3.522l19.433 10.6a1 1 0 010 1.756l-19.433 10.6a2 2 0 01-1.916 0L3.61 15.878a1 1 0 010-1.756l19.433-10.6a2 2 0 011.916 0zM5.93 22.23l-.14-.067a2 2 0 00-1.723 3.607l18.991 9.995.146.07.143.056.138.042.145.033.11.017.187.016.108.001.128-.006.172-.022.135-.028.078-.02.175-.06.103-.043c.039-.017.077-.036.115-.056l18.99-9.995a2 2 0 00-1.864-3.54L24 31.74 5.93 22.23zm0 9l-.14-.067a2 2 0 00-1.723 3.607l19 10 .142.067c.42.182.873.207 1.29.1.465.12.974.074 1.431-.167l19-10a2 2 0 00-1.862-3.54l-18.57 9.772L5.932 31.23zM10.353 15L24 7.556 37.647 15 24 22.444 10.353 15z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">专业管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundNews',5)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 6a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1V7a1 1 0 00-1-1H17zm0 16a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1v-2a1 1 0 00-1-1H17zM4 23a1 1 0 011-1h6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM5 6a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V7a1 1 0 00-1-1H5zM4 39a1 1 0 011-1h6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm13-1a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1v-2a1 1 0 00-1-1H17z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">专业目录管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundCity',6)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.154 46C6.964 46 6 45.015 6 43.8V4.2C6 2.985 6.964 2 8.154 2h23.692C33.036 2 34 2.985 34 4.2V10h6a2 2 0 012 2v32a2 2 0 01-2 2H8.154zM30 6H10v36h6v-7a1 1 0 011-1h6a1 1 0 011 1v7h6V6zm8 8h-4v28h4V14zm-20 8v4h-4v-4h4zm8 0v4h-4v-4h4zm-8-8v4h-4v-4h4zm8 0v4h-4v-4h4z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">城市管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundScoreranking',7)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M41 4a1 1 0 00-1-1H8a1 1 0 00-1 1v38.232a2 2 0 002.628 1.9L24 39.38l14.372 4.751A1.999 1.999 0 0041 42.232V4zm-30.5 9h27v27.157L24 35.693l-13.5 4.464V13zm13.943 3.363a1 1 0 01.454.454l2.042 4.138 4.566.664a1 1 0 01.555 1.705l-3.305 3.221.78 4.548a1 1 0 01-1.45 1.054L24 30l-4.084 2.147a1 1 0 01-1.451-1.054l.78-4.548-3.305-3.22a1 1 0 01.555-1.706l4.566-.664 2.042-4.138a1 1 0 011.34-.454zM10.5 6.5h27V9h-27V6.5z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">一分一段表管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundVip',9)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.095 6h39.81C45.062 6 46 6.895 46 8v32c0 1.105-.938 2-2.095 2H4.095C2.938 42 2 41.105 2 40V8c0-1.105.938-2 2.095-2zM6 10v6h36v-6H6zm0 28V20h36v18H6zm5-8a1 1 0 00-1 1v2a1 1 0 001 1h10a1 1 0 001-1v-2a1 1 0 00-1-1H11z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">VIP卡管理</span>
  </div>
</span>

<span>
  <div class="button" @click="changePage('/backgroundSystem',8)">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.767 2.71A21.685 21.685 0 0024 2.182c-1.618 0-3.215.178-4.768.528l-.897.202-2.795 6.373-6.883-.752-.622.677a21.82 21.82 0 00-4.772 8.295l-.27.872L7.089 24 3.53 28.886l-.537.737.27.872a21.82 21.82 0 004.772 8.295l.622.677 6.883-.752 2.426 5.531.369.842.896.202c1.554.35 3.15.528 4.769.528 1.618 0 3.214-.178 4.767-.528l.897-.201 2.796-6.374 6.883.752.622-.677a21.82 21.82 0 004.771-8.294l.27-.871L40.912 24l3.559-4.887.537-.738-.27-.87a21.82 21.82 0 00-4.772-8.295l-.622-.677-6.883.752-2.796-6.373-.897-.202zM20.916 6.08A18.109 18.109 0 0124 5.818c1.043 0 2.073.089 3.084.263l2.24 5.109a2.976 2.976 0 003.05 1.763l5.507-.603a18.182 18.182 0 013.096 5.382l-3.289 4.516a2.976 2.976 0 000 3.504l3.289 4.516a18.182 18.182 0 01-3.096 5.382l-5.508-.603a2.976 2.976 0 00-3.049 1.763l-2.24 5.109c-1.011.174-2.041.263-3.084.263-1.043 0-2.073-.089-3.084-.263l-2.24-5.108a2.976 2.976 0 00-3.05-1.764l-5.508.603a18.185 18.185 0 01-3.095-5.383l3.289-4.515c.76-1.044.76-2.46 0-3.504l-3.29-4.515a18.186 18.186 0 013.096-5.383l5.509.603a2.976 2.976 0 003.049-1.763l2.24-5.109zM24 14.91c5.004 0 9.056 4.072 9.056 9.091 0 5.019-4.052 9.09-9.056 9.09S14.944 29.02 14.944 24s4.052-9.09 9.056-9.09zM18.58 24c0-3.014 2.429-5.454 5.42-5.454s5.42 2.44 5.42 5.454-2.429 5.455-5.42 5.455-5.42-2.44-5.42-5.455z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">系统设置</span>
  </div>
</span>

<span>
  <div class="button" @click="reloadWindow">
    <svg width="30" height="30" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 7.664C39.064 10.75 44 17.8 44 26c0 11.046-8.954 20-20 20S4 37.046 4 26c0-8.201 4.936-15.25 12-18.336v4.476C11.218 14.907 8 20.078 8 26c0 8.837 7.163 16 16 16s16-7.163 16-16c0-5.922-3.218-11.093-8-13.86V7.664zM22 26V4a1 1 0 011-1h2a1 1 0 011 1v22a1 1 0 01-1 1h-2a1 1 0 01-1-1z" fill="currentColor"/></svg>
    <span style="position: absolute;left: 5px;bottom: 5px;font-size: 12px;">退出登录</span>
  </div>
</span>

    </div>
  <div style="margin-bottom: 15px;margin-top: 30px;">
    工具箱
  </div>
  <div>
    <div class="button" style="width: 270px;height: 130px;padding: 10px 10px;position: relative;word-break: break-all;overflow: hidden;">
      转换Excel表格文件<br>
      <input type="file" name="" id="" style="margin-top: 5px;" @change="chooseFileAndChange">
    </div>
  </div>
 </div>
</template>

<script>
import router from '@/utils/router';
import { read, utils } from 'xlsx'

export default{
  data(){
    return{
      
    }
  },
  mounted(){

  },
  methods:{
    chooseFileAndChange(e){
      const files = e.target.files;
// 如果没有文件名
if(files.length<=0){
return false;
}else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
return false;
}
this.importUniversityStep=2;
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// 切换为新的调用方式
const workbook = read(data, {
type: 'binary'
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 切换为新的调用方式 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续为自己对ws数据的处理
let keys = []
for(let i=0;i<ws.length;i++){
  if(Object.keys(ws[i]).length>keys.length){
    keys = Object.keys(ws[i]);
  }
}
let pre = []
for(let i=0;i<ws.length;i++){
  let t = []
  for(let i1=0;i1<keys.length;i1++){
    t.push(ws[i][keys[i1]]==undefined?'':ws[i][keys[i1]])
  }
  pre.push(t)
}
console.log(pre)
const XLSX = require("xlsx");
            var ws_name = "导出";

            /* Create worksheet */
            var ws_data = pre;
            var ws1 = XLSX.utils.aoa_to_sheet(ws_data);

            // /* Create workbook */
            var wb = XLSX.utils.book_new();

            // /* Add the worksheet to the workbook */
            XLSX.utils.book_append_sheet(wb, ws1, ws_name);
            // /* Write to file */
            XLSX.writeFile(wb, "导出.xlsx");

} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
    },
    reloadWindow(){
      window.location.reload();
    },
    changePage(path,key){
      router.push(path);
      this.changeSiderSelectedKey(key);
    },
  },
  props:{
    changeSiderSelectedKey:{
      type:Function
    },
  },
}
</script>

<style scoped>

.button-wrapper{
  width: auto;
}

.button-wrapper>span{
  margin-right: 10px;
}

.button{
  width: 130px;
  height: 130px;
  background-color: var(--color-neutral-1);
  display: inline-block;
  border: 1px solid rgba(0,0,0,0);
  transition: all .1s;
  position: relative;
  padding-left: 65px;
  padding-top: 65px;
  user-select: none;
  margin-bottom: 5px;
}

.button:hover{
  border: 1px solid var(--color-neutral-4);
  background-color: var(--color-neutral-2);
}

.button:active{
  scale: 0.98;
}

.button svg{
  position: absolute;
  transform: translate(-50%,-50%);
}

</style>